<template>
  <!-- 资产建筑物结构视图 -->
  <div>
    <div v-show="!detailView">
      <el-row type="flex" justify="space-between">
        <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
          <el-form-item v-if="hasFather">
            <div class="iconfont icon-return return-btn" @click="returnFun" title="返回">{{ organizationName }}</div>
          </el-form-item>
          <el-form-item>
            <tree-select
              placeholder="请选择建筑物"
              v-model="searchForm.fbsId"
              filterable
              :width="200"
              :data="buildList"
              :defaultProps="buildDefaultProps"
              :nodeKey="buildNodeKey"
              @node-click="handleNodeClick"
            ></tree-select>
          </el-form-item>
          <el-form-item>
            <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="more-btns">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">更多操作</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">新增</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-row>
      <el-table v-loading="loading" ref="singleUnitBuildAssetTableList" :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="所属建筑物" prop="fbsName" width="750"></el-table-column>
        <el-table-column label="资产总数（个）" prop="total"></el-table-column>
        <el-table-column label="在用资产总数（个）" prop="useCount"></el-table-column>
        <el-table-column label="停用资产总数（个）" prop="noUseCount"></el-table-column>
        <el-table-column label="过期资产数（个）" prop="expireCount"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button @click="jumpDetail(scope.row)" type="text" size="small">清单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <transition name="el-zoom-in-top">
      <!-- 单单位 -->
      <single-unit-asset-list
        v-if="detailView"
        :organizationId="orgId"
        :organizationName="orgName"
        :returnFun="returnFather"
        :queryObj="queryStingObj"
      ></single-unit-asset-list>
    </transition>

    <!-- 新增/编辑资产弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogTitle"
      width="600px"
      top="0vh"
      v-if="dialogBaseInfo"
      :visible.sync="dialogBaseInfo"
      @close="closeAssetInfo"
      v-dialogDrag
      id="isProperty"
    >
      <asset-info-form
        :organizationId="organizationId"
        :assetInfo="assetInfo"
        :closeAssetInfo="closeAssetInfo"
        :onUpdata="onUpdata"
        :typeList="typeList"
        :buildList="buildList"
        :isAddWrite="isAddWrite"
        :defaultFbsId="isChooseTree?'':searchForm.fbsId"
        @child-event="parentEvent"
      ></asset-info-form>
    </el-dialog>
  </div>
</template>
<script>
import TreeSelect from '@/libs/TreeSelect/Main'
import * as Dao from '@/api/assets'
import singleUnitAssetList from './SingleUnitAssetList'
import assetInfoForm from '../Dialog/AssetInfoForm'

export default {
  name: 'SingleUnitBuildAssetList',
  props: {
    // 页面跳转附带的参数
    queryObj: {
      default() {
        return false
      },
    },
    organizationId: {
      required: true,
    },
    organizationName: {
      default() {
        return ''
      },
    },
    hasFather: {
      type: Boolean,
      default() {
        return false
      },
    },
    returnFun: {
      type: Function,
      default() {
        return () => {}
      },
    },
  },
  components: {
    TreeSelect,
    singleUnitAssetList,
    assetInfoForm,
  },
  data() {
    return {
      dialogBaseInfo: false,
      dialogTitle: '新增资产',
      isAddWrite: false,
      assetInfo: {},
      typeList: [],
      isChooseTree: false,
      queryStingObj: this.queryObj,
      loading: true,
      detailView: false,
      orgId: this.organizationId || this.$store.state.userinfo.org.id,
      orgName: this.organizationName || '',
      searchForm: {
        fbsId: '',
      },
      // 建筑物
      buildList: [],
      buildDefaultProps: {
        children: 'nodes',
        label: 'text',
        value: 'id',
      },
      buildNodeKey: 'id',
      tableData: [],
    }
  },
  created() {
    this.getTypeList()
    this.getBuildList()
    this.search()
  },
  methods: {
    handleNodeClick(val) {
      if (val.type == 4 || val.type == 5) {
        this.isChooseTree = false
      } else {
        this.isChooseTree = true
      }
    },
    getTypeList() {
      let that = this
      Dao.getAssetsCategoryIdWithAssets({
        orgId: that.organizationId,
      }).then((res) => {
        // 加上全部
        res.data.unshift({
          id: '',
          name: '全部资产类别',
        })
        that.typeList = res.data
      })
    },
    onUpdata() {
      this.search()
    },
    closeAssetInfo(refresh) {
      this.dialogBaseInfo = false
      clearInterval(this.timer)
      if (typeof refresh === 'boolean' && refresh) {
        // this.getAssetCount()
        this.getTableData(this.assetInfo.id ? '' : 1)
      }
    },
    // 利用计时器让弹框返回顶部
    parentEvent(data) {
      if (data) {
        this.scrollTop = document.getElementById('isProperty').scrollTop
        this.timer = setInterval(() => {
          this.scrollToTopTimer()
        }, 10)
      }
    },
    handleCommand(command) {
      let that = this

      switch (command) {
        case 'add':
          that.addAsset()
          return false
        default:
          return false
      }
    },
    // 新增
    addAsset() {
      this.dialogTitle = '新增资产'
      this.assetInfo = {}
      this.isAddWrite = true
      this.dialogBaseInfo = true
    },
    getBuildList() {
      let that = this
      Dao.getFbsTree({
        organizationId: that.orgId,
      }).then((res) => {
        that.buildList = res.data.length === 0 ? [] : res.data
      })
    },
    getTableData() {
      let that = this
      that.loading = true
      let parames = {
        orgId: that.orgId,
        fbsId: that.searchForm.fbsId || -1,
      }
      // 获取列表信息
      Dao.getAssetsCountByFbs(parames).then((res) => {
        that.tableData = res.data
        that.total = res.total
        that.loading = false
      })
    },
    search() {
      this.getTableData()
    },
    jumpDetail(row) {
      if (row) {
        this.queryStingObj = {
          fbsId: row.fbsId,
        }
        this.orgName = row.orgName
        this.detailView = true
      }
    },
    returnFather() {
      this.detailView = false
      this.getTableData(1)
    },
  },
  watch: {
    fbsIdSelect(val, oldVal) {
      if (val && val !== oldVal) {
        this.search()
      }
    },
  },
  computed: {
    fbsIdSelect() {
      return this.searchForm.fbsId
    },
  },
}
</script>